說明 CSS 中盒模型、display、position 的概念與應用。
什麼是盒模型（box model）？
HTML 的元素都可以視為一個盒子。
盒子從內到外包含元素本身的寬高、padding、border、margin。
預設的 box-sizing 是 content-box，content 指的是圖片中藍色的區塊，所以padding、border、margin 都是會往外長的部分。
如果想要在寬=900（粉紅色區塊）中平均放三個 item（灰色區塊），會設定三個 item 的寬為 300，但此時再去調整 padding 或是 border 會發現版面跑版了：
一點美感都沒有的配色
這是因為設定的 300 是 content 的寬，所以調動了 content 以外的部分，就會讓整體的尺寸塞不下寬度 900 的範圍內了。
要解決這個問題，可以將 item 的 box-sizing 改為 border-box，意思是指將以 content 與 padding 為界的範圍改到以 border 與 margin 為界。如此就算改動 padding 或是 border 都是往內擠，不會影響到原設定好的寬度：
延續沒有美感的配色
display: inline, block 跟 inline-block 的差別
inline：
- 尺寸就是內容，無法靠
height與width設定長寬。 - 設定上下的 padding 時，看似面積有變大，但實際的高度依舊是一行的高度。
如下圖所示，灰色區塊是display: inline並且設定padding和粉紅色display: block排起來的樣子，可以看到灰色和粉紅色的區塊疊在一起，表示灰色inline區塊的高度並沒有隨padding的值而增高。而要以margin調整上下時也無效。
inline可以排在同一行。
- 使用時機：想讓元素在同一行排列且沒有要設定寬高時使用。
<a>、<span>等原來設定就是inline。
block：
- 尺寸可以以
height和width來設定。 - 承第 1 點，所以設定
padding時是有作用的。
灰色區域是有設定寬高及padding的block，可以看到與粉紅色的區塊並沒有疊在一起，設定的高與padding都有算在高度裡。
block會自己占據一整排。
- 使用時機：當元素要占據一整行時。
<div>、<h1>、<p>的預設值為block。
inline-block：
inline-block可以說是inline和block的小孩，結合了inline可以排在同一行及block可以設定高寬的特性。如下圖是將灰色及粉紅色都調整為display: inline-block後的排版：
- 灰色與粉紅色區塊中的空白，是由於在寫 html 時
div和div之間有字元空格所產生的。- 調整父層的
font-size: 0 - 用 comment < > 夾在中間
- 調整父層的
- 使用時機：希望可以像
inline一樣可以併排，但又想要可以像block一樣可以條寬高時使用。
position: static, relative, absolute 跟 fixed
static：
position的預設值。- 在沒有想要元素特別改動位置的時候使用。
relative：
- 以元素在畫面原本的位置為基準點所做的移動，並且會保留原位置，維持文件的排版流。
- 可以運用在元素互換位置，或是廣告視窗內的文字與圖片排版。
absolute：
- 如果上一層的
position是static，會再繼續往上層找，直到找到postion非static的一層，並以此層為基準點移動元素。如果都沒找到，則會以body作為父層。與relative不同，並不會保留元素原本的位置，之後的元素會往前遞補，就像是元素從平面被抽離到另一個平面。可設定z-index的值調整元素的前後關係。 - 可運用於促銷的產品卡右上角會出現的 sale 圖案，或是廣告右上角的叉叉圖示。
fixed：
- 以視窗為基準點調整位置，所以當畫面捲動時，也不會改變其位置，會一直顯示在畫面中。
- 可以用在
navbar、返回最上面的圖示，或是總是會跳在畫面正中央的煩人廣告上。
